<template>
    <div class="baseInfo">
        <!-- 商铺名称 -->
        <div class="shopName">
            <div class="title">商铺名称：</div><div class="value">{{ shopInfo.name }}</div>
        </div>
        <div class="address">
            <div class="title">商铺地址：</div><div class="value">{{ shopInfo.address }}</div>
        </div>
        <div class="contacts">
            <div class="title">联系人：</div><div class="value">{{ shopInfo.contacts }}</div>
        </div>
        <div class="method">
            <div class="title">收运方式：</div><div style="display: flex;">
                <div class="method-box" :class="[shopInfo.method == index ? 'method-active' : '']"
                    v-for="(item, index) in ['上门收运', '定点收运']" :key="index + item">
                    {{ item }}
                </div>
            </div>
        </div>
        <div class="contacts">
            <div class="title">垃圾类别：</div><div class="value">{{ shopInfo.rubbishType.toString() }}</div>
        </div>
        <div class="shopName">
            <div class="title">收运时间：</div><div class="value">{{ shopInfo.time }}</div>
        </div>
        <div class="contacts">
            <div class="title">收运点位：</div><div class="value">{{ shopInfo.contacts }}</div>
        </div>

    </div>
</template>

<script setup>
import Bg from "@/components/bg.vue"
defineProps({
    shopInfo: {
        type: Object,
        default:()=>({
            name:"",
            address:"",
            contacts:"",
            method:"",
            rubbishType:[],
            time:"",
            contacts:""
        })
    }
})
</script>

<style lang="scss" scoped>
.baseInfo {
    padding: 34px 56px;
    box-sizing: border-box;
    margin-top: 16px;
    opacity: 1;
    border-radius: 30px 30px 0px 0px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 0px -8px 10px 4px rgba(218, 231, 245, 0.5);

    >div {
        margin-bottom: 30px;
        display: flex;
        align-items: center;

        .title {
            display: inline-block;
            width: 160px;
            /** 文本1 */
            font-size: 26px;
            color: rgba(128, 128, 128, 1);
            text-align: right;
        }

        .value {
            font-size: 26px;
            color: rgba(51, 51, 51, 1);
            text-align: left;
        }
    }

    .method {
        display: flex;
        align-items: center;

        .method-box {
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            width:126px;
            height: 48px;
            font-size: 24px;
            color: rgba(255, 255, 255, 1);
            background: rgba(197, 207, 224, 1);
        }

        .method-active {
            background: rgba(8, 173, 255, 1);
        }
    }

}
</style>